/**
 * @author Syang4
 */
if (!Util){
    var Util = {};
}

Util.styleBox = function(container,profile,callbacks){
    this.profile = {
        width: 100,
		type:'ST',
        isMainRange:false,
        clickable: true,
        showHeader:false,
		defaultCheck:[]
    }
    
    this.callbacks = callbacks||{};
    
    this.HTML ='<div class="qs-ui-msstylebox">'+ 
        '<table cellpadding="0" cellspacing="0" class ="msstylebox">' +
            '<tbody>' +
                '<tr>' +
                    '<td index=1 class="large value"></td>' +
                    '<td index=2 class="large core"></td>' +
                    '<td index=3 class="large growth"></td>' +
                '</tr>' +
                '<tr>' +
                    '<td index=4 class="mid value"></td>' +
                    '<td index=5 class="mid core"></td>' +
                    '<td index=6 class="mid growth"></td>' +
                '</tr>' +
                '<tr>' +
                    '<td index=7 class="small value"></td>' +
                    '<td index=8 class="small core"></td>' +
                    '<td index=9 class="small growth"></td>' +
                '</tr>' +
            '</tbody>' +
        '</table>'+
    '</div>'
    
    this.domCheckIndexs = [];
    this.init(container, profile);
}

Util.styleBox.prototype = {
    init: function(container, profile){
        this.el = $(this.HTML);
        this.container = container;
        this.el.appendTo(this.container);
        this.profile = $.extend(true, this.profile, profile);
        this._bindEvent();
		this.bindData(this.profile.defaultCheck);
        if (this.profile.showHeader) {
			
			if(this.profile.type == "ST"){
				this.el.append('<table class="header-right" style="float:left;width:25px"><tbody><tr><td>Lrg</td></tr><tr><td>Mid</td></tr><tr><td>Sml</td></tr></tbody></table>');
				this.el.append('<table class="header-bottom" style="float:left;height:20px;clear: both;"><tbody><tr><td>Val</td><td>Cor</td><td>Gro</td></tr></tbody></table>');	
			}else{
				this.el.append('<table class="header-right" style="float:left;width:25px"><tbody><tr><td>Hi</td></tr><tr><td>Mid</td></tr><tr><td>Low</td></tr></tbody></table>');
				this.el.append('<table class="header-bottom" style="float:left;height:20px;clear: both;"><tbody><tr><td>Ltd</td><td>Mod</td><td>Ext</td></tr></tbody></table>');
			}
		}
        this.reSize(this.profile.width);
    },
    check: function(idx){
        this.activeCell.addClass("checked");
        var idx = this.activeCell.attr("index");
        this.domCheckIndexs.push(idx);
        this.domCheckIndexs.sort();
        if (typeof(this.callbacks.onCellCheck)=='function') {
            this.callbacks.onCellCheck(this.activeCell, {
                index: this.domCheckIndexs
            });
        }
    },
    selectAll:function(){
        var self=this;
        this.el.find('.msstylebox td').each(function(){
            if(!$(this).hasClass("checked")){
                self.activeCell = $(this);
                self.check(self.activeCell.attr("index"));
            }
        });
    },
    bindData:function(selected){
        this.el.find('.msstylebox td').removeClass('checked');
        this.domCheckIndexs =[];
        for(var i=0,l=selected.length;i<l;i++){
            var obj=this.el.find('td[index='+selected[i]+']');
            if(!obj.hasClass("checked")){
                this.activeCell=obj;
                this.check(selected[i]);
            }
        }
    },
    unCheck:function(idx){
        this.activeCell.removeClass("checked");
        for (var i = 0, l = this.domCheckIndexs.length; i < l; i++) {
            if (this.domCheckIndexs[i] == idx) {
                this.domCheckIndexs.splice(i, 1);
                break;
            }
        }
        if (typeof(this.callbacks.onCellCheck)=='function') {
            this.callbacks.onCellUnCheck(this.activeCell, {
                index:this.domCheckIndexs
            });
        }
    },
    
    _bindEvent:function(){
        var self = this;
        this.el.find('td').bind('click',function(){
            self.activeCell = $(this);
            if (self.profile.clickable) {
                if(!self.activeCell.hasClass("checked")){
                    self.check(self.activeCell.attr("index"));
                }else{
                    self.unCheck(self.activeCell.attr("index"));
                }
            }
        });
    },
    
    reset:function(){
        this.el.find('.msstylebox td').removeClass('checked');
        this.domCheckIndexs =[];
        if (typeof(this.callbacks.onReSet)=='function') {
            this.callbacks.onReSet({
                index: this.domCheckIndexs
            });
        }
    },
    
    reSize: function(w){
        var showHeader = this.profile.showHeader;
        if (!w) {
            var parent = this.container;
            var w = parent.width();
            var h = parent.height() + 1;
            if (showHeader) {
                w -= 25;
                h -= 20;
            }
            w = Math.min(w, h);
        }
        
        this.width = parseInt(w, 10);
        this.el.find(".msstylebox").css({
            width: this.width,
            height: this.width
        });
        this.el.find(".header-right").css({
            height: this.width
        });
        this.el.find(".header-bottom").css({
            width: this.width
        });
        if (typeof w == 'undefined') {
			this.container.css({
				width: showHeader ? this.width + 25 : w,
				height: showHeader ? this.width + 20 : w
			});
		}
    }
}